<template>
	<div id="Address">
		<!-- 收货地址 -->
		<van-nav-bar @click-left="$router.go(-1)" fixed placeholder title="收货地址" left-arrow></van-nav-bar>
		<van-address-list 
			v-model="chooseAddress"
		 	:list="dataList"
			default-tag-text="默认地址"
			@add="$router.push('/Addaddress')"
			@click-item="updateDefault"
		>
		 </van-address-list>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				chooseAddress:""
			}
		},
		methods:{
			// 修改默认地址
			updateDefault(itemMap){
				if(this.dataList.length==1) return
				const params={
					aid:itemMap.aid,
					isDefault:1
				}
				this.$store.dispatch("UpdateDefaultRess",params)
				.then(result => {
					if(result){
						this.$dialog.alert({
							message:"修改成功",
							confirmButtonColor:"#25987D"
						})
						this.$store.dispatch("loaduserAddress")
						.then(dataList => {
							this.dataList=dataList
						})
					}
				})
			}
		},	
		async mounted(){
			const dataList=await this.$store.dispatch("loaduserAddress")
			this.dataList=dataList
			this.dataList.forEach(itemObj=>{
				if(itemObj.isDefault==1){
					this.chooseAddress=itemObj.id
					itemObj.isDefault=true
				}else {
					itemObj.isDefault=false
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
#Address {
	user-select: none;
	::v-deep {
		.van-nav-bar {
			background-color: $themeColor;
			.van-nav-bar__title {
				color: #fff;
			}
			.van-icon {
				color: #fff;
			}
		}
		.van-icon {
			color: #fff;
			border-color: $themeColor;
		}
		.van-address-item .van-radio__icon--checked .van-icon {
			background-color: $themeColor;
		}
		.van-tag--danger{
			background-color: $themeColor;
		}
	}
	
}
</style>